<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
</head>
<style>
*{
    margin: 0px ;
    padding: 0px;
}
#container{
    position: relative;
}
.box{
    padding: 5px;
    float: left;
}
.box_img{
    padding: 5px;
    border: 1px solid #cccccc; 
    box-shadow:0 0 5px #ccc;  
    border-radius: 5px;  
}
.box_img img{
    width: 150px;
    height: auto;
}


</style>
<body>
    <div id="container">
        <!--容器-->
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="a.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="b.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="c.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="d.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="a.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="b.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="c.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="d.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="a.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="b.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="c.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="d.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
    </div>
</body>
</html>
<script>
window.onload=function(){
	imglocation("container","box");
	var imgdata={"data":[{"src":"a.jpg"},{"src":"b.jpg"},{"src":"c.jpg"},{"src":"d.jpg"},{"src":"e.jpg"}]};
	window.onscroll=function(){
		if(checkscroll("container","box")){
			var dparent=document.getElementById("container");
			for(var i=0;i<imgdata.data.length;i++){
				var dchild=document.createElement("div");
				dchild.className="box";
				dparent.appendChild(dchild);
				var boximg=document.createElement("div");
				boximg.className="box_img";
				dchild.appendChild(boximg);
				var img=document.createElement("img");
				img.src=imgdata.data[i].src;
				boximg.appendChild(img);
			}
		}
		imglocation("container","box");
	}
	function checkscroll(parent,child){
		var dparent=document.getElementById(parent);
		var dchild=get_child(dparent,child);
		var lastimgheight=dchild[dchild.length-1].offsetHeight;
		var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
		var pageheight=document.body.clientHeight||document.documentElement.clientHeight;
		if(lastimgheight<scrolltop+pageheight){
			return true;
		}
	}
	function imglocation(parent,child){
		var dparent=document.getElementById(parent);
		var dchild=get_child(dparent,child);
		var dwidth=getwidth(dparent,dchild);
		var imgwz=minimglocation(dwidth,dchild);
	}
	function get_child(parent,child){
		var child_array=[];
		var allchild=parent.getElementsByTagName("*");
		for(var i=0;i<allchild.length;i++){
			if(allchild[i].className==child){
				child_array.push(allchild[i]);
			}
		}
		return child_array;
	}
	function getwidth(dparent,dchild){
		var imgwidth=dchild[1].offsetWidth; 
		var winwidth=document.documentElement.clientWidth;
		var numwidth=Math.floor(winwidth/imgwidth);
		dparent.style.cssText="width:"+imgwidth*numwidth+"px; margin: 0 auto";
		return numwidth;
	}
	function minimglocation(dwidth,dchild){
		var boxheightarray=[];
		for(var i=0;i<dchild.length;i++){
			if(i<dwidth){
				boxheightarray[i]=dchild[i].offsetHeight;	
			}else{
				var minheight=Math.min.apply(null,boxheightarray);
				var minindex=getminindex(boxheightarray,minheight);	
				dchild[i].style.position="absolute";
				dchild[i].style.top=minheight+"px";
				dchild[i].style.left=dchild[minindex].offsetLeft+"px";
				boxheightarray[minindex]=boxheightarray[minindex]+dchild[i].offsetHeight;
			}
		}
	}
	function getminindex(boxheightarray,minheight){
		for(var i in boxheightarray){
			if(boxheightarray[i]==minheight){
				return i;
			}
		}
	}
}
</script>
